<!-- 综合-价格-分类组件 -->
<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        title="全部"
        disabled
        v-model="value1"
        :options="option1"
      />
      <van-dropdown-item
        title="价格"
        v-model="value2"
        :options="option2"
        @change="priceChange"
      />
      <van-dropdown-item
        title="分类"
        v-model="value3"
        :options="filterCategory"
        @change="cateChange"
      />
    </van-dropdown-menu>
    <!-- 如有没有搜索到商品显示 empty-->
    <van-empty
      v-if="goodsList.length == 0"
      class="custom-image"
      image="search"
      description="抱歉,没有搜索到商品"
    />
    <!-- 引入下方产品展示组件，如果搜索到商品显示 -->
    <Products :goodsList="goodsList" v-else></Products>
  </div>
</template>

<script>
import Products from "@/components/Products";
export default {
  data() {
    return {
      value1: "",
      value2: "desc", //选中的价格排序方式, 默认由高到低
      option1: [],
      option2: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
    };
  },
  components: {
    Products,
  },
  props: ["goodsList", "filterCategory"],
  created() {
    console.log(55, this.filterCategory);
  },
  computed: {
    value3: {
      // 选中的分类,计算属性只要依赖的项发生变化会重新计算。
      get() {
        let val = "";
        this.filterCategory.map((item) => {
          if (item.checked) {
            val = item.value;
          }
        });
        return val;
      },
      set(val) {
        console.log(val);
      },
    },
  },
  methods: {
    priceChange(val) {
      // 根据价格高/低 排序
      console.log(this.value2);
      this.$emit("priceChange", val);
    },
    cateChange(val) {
      // 根据类别筛选
      console.log(100, val);
      this.$emit("cateChange", val);
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>